<html xmlns:th="http://www.thymeleaf.org"><!-- Thymeleaf??????????????????? -->
<head>
    <meta content="text/html;charset=UTF-8"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <style>
    .password-verdict{
    color:#000;
    }
    </style>
    <script th:src="@{/js/jquery-3.5.1.min.js}" type="text/javascript"></script>
    <title th:utext="#{message.updatePassword}">update password</title>
</head>
<body>
<div>
    <div class="container">
        <div class="row">
            <h1 th:utext="#{message.resetYourPassword}">reset</h1>
            <form >
                <br/>
                    <label class="col-sm-2" th:utext="#{label.user.password}">password</label>
                    <span class="col-sm-5"><input class="form-control" id="password" name="newPassword" type="password" value="" /></span>
                    <div class="col-sm-12"></div>
                <br/><br/>
                    <label class="col-sm-2" th:utext="#{label.user.confirmPass}">confirm</label>
                    <span class="col-sm-5"><input class="form-control" id="matchPassword" type="password" value="" /></span>
                <div class="col-sm-12"></div>
                <br/><br/>
                    <label class="col-sm-2" th:utext="#{token.message}">confirm</label>
                    <span class="col-sm-5" type="hidden"><input class="form-control" id="token" name="token" th:value="${token}" /></span>
                <div id="globalError" class="col-sm-12 alert alert-danger" style="display:none" th:utext="#{PasswordMatches.user}">error</div>
                   
                <div class="col-sm-12">
                <br/><br/>
                <button class="btn btn-primary" type="submit" onclick="savePass()" th:utext="#{message.updatePassword}">submit</button>
                </div>
            </form>
            
        </div>
    </div>
   
    <script th:inline="javascript">
        var serverContext = [[@{/}]];

        $(document).ready(
            function () {
                $('form').submit(function(event) {
                    savePass(event);
                });
        });

        function savePass(event){
            event.preventDefault();
            $(".alert").html("").hide();
            $(".error-list").html("");
            var formData= $('form').serialize();
            $.post(serverContext + "user/savePassword",formData ,function(data){
                window.location.href = serverContext + "login?message="+data.message;
            })
            .fail(function(data) {
                if(data.responseJSON.error.indexOf("InternalError") > -1){
                    window.location.href = serverContext + "login?message=" + data.responseJSON.message;
                }
                else{
                    var errors = $.parseJSON(data.responseJSON.message);
                    $.each( errors, function( index,item ){
                        $("#globalError").show().html(item.defaultMessage);
                    });
                    errors = $.parseJSON(data.responseJSON.error);
                    $.each( errors, function( index,item ){
                        $("#globalError").show().append(item.defaultMessage+"<br/>");
                    });
                }
            });
        }

    </script>
</div>
</body>

</html>